<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入放大镜样式 -->
    <link rel="stylesheet" href="../lib/magnifier/css/magnifier.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="../css/productDetail.css">
    <!-- 引入jq -->
    <script src="../lib/jquery.js"></script>
    <!-- 引入放大镜插件 -->
    <script src="../lib/magnifier/js/magnifier.js"></script>
    <!-- 引入当前页面js文件 -->
    <script src="../js/productDetail.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head clearfix">
        <!-- head-top -->
        <div class="container-fluid bgc0">
            <div class="head-top container clearfix">
                <a href="./index.html" class="fl cfff">legochina.cn</a>
                <p class="fr cfff">欢迎光临<a href="./index.html" class="cf60">乐购</a> ，请 <a href="./log.html"
                        class="cf60">登陆</a> \<a href="./register.html" class="cf60">注册</a> </p>
                <h1 class="logo"><img src="../imags/LOGO_02.jpg" alt=""></h1>
            </div>

        </div>
        <!-- head-search+head-shop -->
        <div class=" container clearfix pt424">
            <div class="fr searchShop">
                <div class="head-search fl">
                    <input type="text" placeholder="创意文具" class="fl">
                    <button class="fl"></button>
                </div>

                <div class="head-shop fl">
                    <a href="./shopcar.html" class="fl head-shopcar cfff">购物车</a>
                    <a href="" class="fl head-order bgceb">我的订单</a>
                </div>
            </div>
        </div>
        <!-- head-nav -->
        <div class="container head-nav clearfix">
            <ul class="fr">
                <li class="fz16 fl"><a href="#">图书</a></li>
                <li class="fz16 fl"><a href="#">电子书</a></li>
                <li class="fz16 fl"><a href="#">原创文学</a></li>
                <li class="fz16 fl"><a href="#">服装</a></li>
                <li class="fz16 fl"><a href="#">运动户外</a></li>
                <li class="fz16 fl"><a href="#">孕婴童</a></li>
                <li class="fz16 fl"><a href="#">家居</a></li>
                <li class="fz16 fl"><a href="#">创意文具</a></li>
                <li class="fz16 fl"><a href="#">地方特产</a></li>
                <li class="fz16 fl"><a href="#">海外购</a></li>
                <li class="fz16 fl"><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>
    <!-- 产品介绍 -->
    <div class="container-fluid productBox bgcf2 pt20 pb30">
        <p class="guide mb10 container"><a href="#">图书 </a>> <a href="#">小说</a> ><a href="#"> 情感/家庭/婚姻</a>> <a
                href="#">博集天卷</a> >
            <a href="#">她和他</a></p>
        <div class="container productPresent clearfix pt15 pl20 pb25 bgcf">

            <!--放大镜-->
            <div class="fl">
                <div class="magnifier" id="magnifier1">
                    <div class="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="../imags/pro_detail0101.jpg " />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../imags/sole1.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../imags/sole2.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../imags/saleList1.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../imags/saleList2.jpg" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                </div>
            </div>

            <!-- 图书详情 -->
            <div class="fl proContent ml20 ">
                <h3 class="fz22 liheight40">他和她</h3>
                <p class="fz18 liheight40 cf60">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                <p class="saleprice  fz16 liheight40 cb3">"[法] 马克·李维 著；杨亦雨 译</p>
                <div class="saleprice mt20 bgcf2">
                    <p class="liheight40 cb3 fz16">乐 购 价：<span class="fz24 cf60">￥26.20 </span>[6.9折] [定价：￥38.00] (降价通知)
                    </p>
                    <p class="liheight40 cb3 fz16">促销信息：<span class="cf60">"满减 每满150.00元，可减50.00元现金</span><a href="#"
                            class="cb3 ml10">详情 >></a></p>
                    <div class="liheight60 cb3 fz16">领 券：<img class="mr10" src="../imags/productDetail_03.png"
                            alt=""><img src="../imags/productDetail_03.png" alt="">
                    </div>
                    <div class="comment">
                        <p class="cb3">累计评价</p>
                        <p class="cf60">99999</p>
                    </div>
                </div>
                <div class="clearfix edition mt20 mb40">
                    <p class="fl">种类选择：</p>
                    <p class="fl ordinary">平装版</p>
                    <p class="fl delicate ">精装版</p>
                </div>
                <div class="clearfix tecenter">
                    <input type="text" value="1" class="num fl mt10">
                    <div class="addReduce fl mt10">
                        <div class="add">+</div>
                        <div class="reduce">-</div>
                    </div>
                    <div class="shopcar fl  bgcf60 cfff ml30">加入购物车</div>
                </div>
                <p class="mt20 fz16 cb3">温馨提示：支持7天无理由退货</p>
            </div>


        </div>
    </div>
    </div>

    <!-- 人气单品 -->

    <div class="container popular">
        <div class="popularTitle">
            <h2 class="fz24 cfff bgcf60">人气单品</h2>
        </div>
        <ul class="popularList clearfix">
            <li class="fl ">
                <a href="#" class="mauto"><img src="../imags/saleList1.jpg" alt=""></a>
                <div class="cfff tecenter">8折<div></div>
                </div>
                <p class="tei10 mb5 mt5"><a href="#" class="mr10">白夜行</a><a href="#">东野上吾</a></p>
                <p class="tei10 cf60">推荐：
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star_09.png" alt="">
                </p>
                <p class="tei10 fz24"><span class="cf60">&yen;:38</span> <span
                        class="cb3 price tedecoration ">&yen;:58</span></p>
            </li>
            <li class="fl">
                <a href="#" class="mauto"><img src="../imags/saleList1.jpg" alt=""></a>
                <div class="cfff tecenter">8折<div></div>
                </div>
                <p class="tei10 mb5 mt5"><a href="#" class="mr10">白夜行</a><a href="#">东野上吾</a></p>
                <p class="tei10 cf60">推荐：
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star_09.png" alt="">
                </p>
                <p class="tei10 fz24"><span class="cf60">&yen;:38</span> <span
                        class="cb3 price tedecoration ">&yen;:58</span></p>
            </li>
            <li class="fl">
                <a href="#" class="mauto"><img src="../imags/saleList1.jpg" alt=""></a>
                <div class="cfff tecenter">8折<div></div>
                </div>
                <p class="tei10 mb5 mt5"><a href="#" class="mr10">白夜行</a><a href="#">东野上吾</a></p>
                <p class="tei10 cf60">推荐：
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star_09.png" alt="">
                </p>
                <p class="tei10 fz24"><span class="cf60">&yen;:38</span> <span
                        class="cb3 price tedecoration ">&yen;:58</span></p>
            </li>
            <li class="fl">
                <a href="#" class="mauto"><img src="../imags/saleList1.jpg" alt=""></a>
                <div class="cfff tecenter">8折<div></div>
                </div>
                <p class="tei10 mb5 mt5"><a href="#" class="mr10">白夜行</a><a href="#">东野上吾</a></p>
                <p class="tei10 cf60">推荐：
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star_09.png" alt="">
                </p>
                <p class="tei10 fz24"><span class="cf60">&yen;:38</span> <span
                        class="cb3 price tedecoration ">&yen;:58</span></p>
            </li>
            <li class="fl">
                <a href="#" class="mauto"><img src="../imags/saleList1.jpg" alt=""></a>
                <div class="cfff tecenter">8折<div></div>
                </div>
                <p class="tei10 mb5 mt5"><a href="#" class="mr10">白夜行</a><a href="#">东野上吾</a></p>
                <p class="tei10 cf60">推荐：
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star1_07.png" alt="">
                    <img src="../imags/star_09.png" alt="">
                </p>
                <p class="tei10 fz24"><span class="cf60">&yen;:38</span> <span
                        class="cb3 price tedecoration ">&yen;:58</span></p>
            </li>


        </ul>

    </div>
    <!--产品详情  -->
    <div class="container detail clearfix">
        <div class="fl">
            <img src="../imags/detail_03.jpg" alt="">
        </div>
        <div class="fr procomm">
            <div class="clearfix option fz24">
                <p class="fl active">商品介绍</p>
                <p class="fl">评价(9999)</p>
            </div>
            <ul>
                <li class="block prointro">
                    <img src="../imags/detail.jpg" alt="">
                </li>
                <li >
                    <img src="../imags/detail_06.jpg" alt="">
                    <div class="clearfix  assess">
                        <p class="fl">全部评价(9999)</p>
                        <p class="fl">好评(888)</p>
                        <p class="fl">中评(888)</p>
                        <p class="fl">差评(888)</p>
                    </div>
                    <img src="../imags/detail_09.jpg" alt="">
                </li>
                
            </ul>

        </div>


    </div>
</body>

</html>